<template>
  <div class="vehicleEdt">
    <div class="vehicleEdt-top">
      <span>
        车辆管理
      </span>
      <el-popover
          class="vehicleEdt-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="配置好参数后，点击新增车辆后，点击地点即可添加车辆，需要注意，当开启自动跟随后，视角是不可以移动的，添加路径时，鼠标左键添加路径点，右键结束添加，可以删除路径，只有添加车辆和选择路径后，点击移动才有效果">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="vehicleEdt-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="vehicleEdt-data">
      <el-form ref="vehicleEdtData" :model="vehicleEdtObj" label-width="100px">
        <el-form-item label="车辆ID" class="vehicle-select">
          <el-select v-model="vehicleIndex" placeholder="请选择" @change="changeVehicle">
            <el-option v-for="(item,index) in carLists"
                       :key="item.id"
                       :label="'车辆'+(index+1)"
                       :value=index>
            </el-option>
          </el-select>
          <el-button @click="focusVehicle">定位</el-button>
        </el-form-item>
        <el-form-item label="车辆类型" class="vehicle-select">
          <el-select v-model="vehicleEdtObj.assetPath" placeholder="请选择">
            <el-option
                v-for="item in assetPaths"
                :key="item.value"
                :label="item.label"
                :value=item.value>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆颜色" class="vehicle-select">
          <el-select v-model="vehicleEdtObj.colorType" placeholder="请选择">
            <el-option
                v-for="item in colorTypes"
                :key="item.value"
                :label="item.label"
                :value=item.value>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动跟随">
          <el-switch v-model="vehicleEdtObj.followEnable"></el-switch>
        </el-form-item>
        <el-form-item label="跟随距离">
          <el-input-number v-model="vehicleEdtObj.distance" :step="1" :max="200" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="路径选择" class="vehicle-select">
          <el-select v-model="wayIndex" placeholder="请选择">
            <el-option v-for="(item,index) in carWays"
                       :key="index"
                       :label="item.label"
                       :value="index">
            </el-option>
          </el-select>
          <el-button @click="moveCar()">移动</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="vehicleEdt-btn">
      <el-button @click="selectVehicleEdt()">新增车辆</el-button>
      <el-button @click="delVehicleEdt()">删除</el-button>
      <el-button @click="closeVehicleEdt()">关闭</el-button>
      <el-button>编辑保存</el-button>
      <div class="vehicleEdt-btn-divider">
        <el-divider></el-divider>
      </div>
      <el-button @click="selectVehicleWay()">添加路径</el-button>
      <el-select v-model="wayIndex_del" placeholder="请选择" class="btn-select">
        <el-option v-for="(item,index) in carWays"
                   :key="item.value"
                   :label="item.label"
                   :value="index">
        </el-option>
      </el-select>
      <el-button @click="delVehicleWay()">删除</el-button>
    </div>
    <div class="vehicleEdt-way" v-if="openSaveWay">
      <div class="modal-content">
        <h2>输入车辆坐标和时间点</h2>
        <input v-model="wayName" type="text" placeholder="路径名" class="input-field" style="margin-bottom: 10px">
        <div v-for="(item, index) in coordinates" :key="index" class="input-row">
          <input v-model="item.timeStamp" type="text" placeholder="时间点" class="input-field" style="width:40px">
          <input v-model="item.coordinate" type="text" placeholder="车辆坐标" class="input-field" style="width:300px">
          <input v-model="item.gear" type="text" placeholder="挡位" class="input-field" style="width:40px">
          <button @click="removeCoordinate(index)" class="remove-button">删除</button>
        </div>
        <button @click="addCoordinate" class="add-button">添加</button>
        <button @click="saveCarWays" class="save-button">保存</button>
        <button @click="openSaveWay = false" class="close-button">关闭</button>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/vehicleEdt/vehicleEdt';
</style>
<script>
/* eslint-disable */
import "remixicon/fonts/remixicon.css";

export default {
  name: "vehicleEdt",
  props: {
    carLists: {
      type: Array,
    },
    carIds: {
      type: Array,
    },
    carWays: {
      type: Array,
    },
    carData: {
      type: Array,
    },
  },
  data() {
    return {
      wayName: '',
      openSaveWay: false,
      coordinates: [],
      wayIndex_del: null,
      wayIndex: null,
      vehicleIndex: null,
      vehicleEdtObj: {
        id: null,
        assetPath: '',
        colorType: 0,
        followEnable: false,
        distance: 5,
      },
      assetPaths: [
        {
          value: "/JC_CustomAssets/VehicleLibrary/Exhibition/SUV_01",
          label: "SUV",
        },
        {
          value: "/JC_CustomAssets/VehicleLibrary/Exhibition/公交车_01",
          label: "公交车",
        },
        {
          value: "/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01",
          label: "重型货车",
        },
        {
          value: "/JC_CustomAssets/VehicleLibrary/Exhibition/出租车_01",
          label: "出租车",
        },
        {
          value: "/JC_CustomAssets/VehicleLibrary/Exhibition/轿车_07",
          label: "轿车",
        },
      ],
      colorTypes: [
        {
          value: 0,
          label: "随机",
        },
        {
          value: 2,
          label: "灰白色",
        },
        {
          value: 3,
          label: "灰色",
        },
        {
          value: 4,
          label: "蓝色",
        },
        {
          value: 5,
          label: "青色",
        },
        {
          value: 6,
          label: "白色",
        },
        {
          value: 7,
          label: "棕色",
        },
        {
          value: 1,
          label: "黑色",
        },
      ],
    }
  },
  methods: {
    moveCar() {
      if (!this.vehicleEdtObj.id) {
        this.$message.warning("seam no car ?")
      } else if (!this.wayIndex || !this.carWays || this.wayIndex > this.carWays.length - 1) {
        this.$message.warning("seam no way ?")
      } else {
        let id = this.vehicleEdtObj.id
        let data = {
          id: id,
          wayPoints: this.carWays[this.wayIndex].value
        }
        this.carData.push(data)
        __g.vehicle.setWayPoint(data);
        __g.vehicle.start({id: id, timeStamp: 0}, function () {
          __g.vehicle.focus(id, true, 5, 1, [-5, 0, 0], [50, 0, 0])
        });
        setTimeout(() => {
          __g.vehicle.focus(id, false, null, null, null, null)
          this.man_out()
        }, this.carWays[this.wayIndex].value.length * 1000);
      }
    },
    delVehicleWay() {
      if (!this.carWays) {
        this.$message.warning("seam it null ?")
      } else if (!this.wayIndex_del) {
        this.$message.warning("seam no choose ?")
      } else {
        this.carWays.splice(this.wayIndex_del, 1)
        this.wayIndex_del = null;
        this.wayIndex = null;
      }
    },
    saveCarWays() {
      if (!this.wayName) {
        this.$message.warning("wayName!=null")
      } else if (!this.coordinates) {
        this.$message.warning("coordinates!=null")
      } else {
        this.carWays.push({
          value: JSON.parse(JSON.stringify(this.coordinates)),
          label: JSON.parse(JSON.stringify(this.wayName))
        })
        this.openSaveWay = false
        this.coordinates = []
        this.wayName = ''
      }
    },
    addCoordinate() {
      this.coordinates.push({timeStamp: this.coordinates.length, coordinate: '', gear: 3});
    },
    removeCoordinate(index) {
      this.coordinates.splice(index, 1);
    },
    addCarWays(coordinates) {
      for (let i = 0; i < coordinates.length; i++) {
        let one = {
          timeStamp: i,
          coordinate: coordinates[i],
          gear: 3
        }
        this.coordinates.push(one)
      }
      this.openSaveWay = true
    },
    selectVehicleWay() {
      __g.editHelper.setParam(1, 0)
      __g.editHelper.start();
    },
    closeVehicleEdt() {
      this.$emit('close-popup');
      this.reloadVehicle()
    },
    delVehicleEdt() {
      if (this.vehicleEdtObj.id) {
        __g.vehicle.delete(this.vehicleEdtObj.id);
        this.carLists.splice(this.vehicleIndex, 1)
        this.carIds.splice(this.vehicleIndex, 1)
        if (this.carLists.length !== 0) {
          this.vehicleIndex = this.carLists.length - 1
          this.changeVehicle()
        } else {
          this.reloadVehicle()
        }
      } else {
        this.$message.warning("未选择删除的对象")
      }
    },
    async addVehicleEdt(coordinate) {
      console.log(coordinate)
      const timestamp = new Date().getTime();
      let id = 'car' + timestamp
      let str = await __g.camera.get();
      let obj = {
        id: id,
        coordinate: coordinate,
        assetPath: this.vehicleEdtObj.assetPath,
        colorType: this.vehicleEdtObj.colorType,
        rotation: [str.pitch, str.yaw, 0],
        followEnable: this.vehicleEdtObj.followEnable,
        distance: this.vehicleEdtObj.distance,
        autoHeight: false,
        supportAttach: true,
        localOffset: [0, 0, 0],
        coordinateType: 0,
      }
      this.carLists.push(obj)
      this.vehicleIndex = this.carLists.length - 1
      this.carIds.push(id)
      await __g.vehicle.add(obj);
      this.vehicleEdtObj.id = id
      if (this.vehicleEdtObj.followEnable) {
        __g.vehicle.focus(id, this.vehicleEdtObj.followEnable, this.vehicleEdtObj.followEnable, 3, [-10, 0, 0], [25, 0, 0]);
      } else {
        __g.vehicle.focus(id);
      }
    },
    selectVehicleEdt() {
      if (!this.vehicleEdtObj.assetPath) {
        this.$message.warning("seam car type = null ?")
      } else {
        this.$emit('add-car');
      }
    },
    focusVehicle() {
      if (this.vehicleEdtObj.id) {
        __g.vehicle.focus(this.vehicleEdtObj.id)
      } else {
        this.$message.warning("未选择对象")
      }
    },
    changeVehicle() {
      this.vehicleEdtObj = {
        id: this.carLists[this.vehicleIndex].id,
        assetPath: this.carLists[this.vehicleIndex].assetPath,
        colorType: this.carLists[this.vehicleIndex].colorType,
        followEnable: this.carLists[this.vehicleIndex].followEnable,
        distance: this.carLists[this.vehicleIndex].distance,
      }
    },
    reloadVehicle() {
      this.vehicleIndex = null
      this.wayName = ''
      this.openSaveWay = false
      this.coordinates = []
      this.wayIndex_del = null
      this.wayIndex = null
      this.vehicleEdtObj = {
        id: null,
        assetPath: '',
        colorType: 0,
        followEnable: false,
        distance: 5,
      }
    },
  },
  mounted() {

  },
};
</script>